<template>
  <el-dialog
    v-model="visible"
    title="征集参与者"
    :close-on-click-modal="false"
    style="width: 80%;"
  >
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      label-width="120px"
      @onclick="onSubmit()"
    >
      <div class="main">
        <div class="content">
          <div class="order-number">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="活动标题:">
                  <span class="text">{{ dataInfo.activityTitle }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="活动介绍:">
                  <span class="text">{{ dataInfo.activityDesc }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="姓名:">
                  <span class="text">{{ dataInfo.realName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="手机号码:">
                  <span class="text">{{ dataInfo.phone }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="联系电话:">
                  <span class="text">{{ dataInfo.email }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="学校名称:">
                  <span class="text">{{ dataInfo.school }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="年级:">
                  <span class="text">{{ dataInfo.grade }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报名时间:">
                  <span class="text">{{ dataInfo.createdAt }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="审批:">
                  <el-select v-model="dataForm.status" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">
          取消
        </el-button>
        <el-button
          v-if="dataForm.status > 0"
          type="primary"
          @click="onSubmit()"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {ElMessage} from "element-plus";

const emit = defineEmits(['refreshDataList'])
const isSubmit = ref(false)
const dataForm = ref({
  id: null,
  score: 0,
  approval: 0,
  status: 0
})
const dataInfo = ref(null)
const visible = ref(false)

const options = reactive([
  {
    value: 2,
    label: '未通过'
  }, {
    value: 1,
    label: '已通过'
  }, {
    value: 0,
    label: '待审批'
  }
])
/**
 * 获取数据列表
 */
const init = (data) => {
  visible.value = true
  dataInfo.value = data
}
defineExpose({ init })

const onSubmit = () => {
  if (isSubmit.value) {
    return
  }
  isSubmit.value = true
  http({
    url: http.adornUrl('/admin/activityEnrollments/approval'),
    method: 'post',
    data: http.adornData({
      id: dataInfo.value.id,
      status: dataForm.value.status
    })
  })
    .then(() => {
      ElMessage({
        message: '操作成功',
        type: 'success',
        duration: 1000,
        onClose: () => {
          isSubmit.value = false
          visible.value = false
          emit('refreshDataList')
        }
      })
    })
}
</script>
<style scoped lang="scss">
.main {
  height: 100%;
  width: 100%;
  font: 14px Arial, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  color: #495060;
}
.content {
  margin: 0 20px;
  .order-state {
    position: relative;
    margin-top: 50px;
    border-bottom: 1px solid #e9eaec;
  }
}
.order-number {
  .text {
    font-size: 14px;
    color: #8a8a8a;
  }
}
</style>
